<template>
  <div>
    <div v-if="ishide !== true">
      <el-input v-model="selectusernames" :placeholder="'请选择' + title + ''" size="small" class="input-with-select" disabled></el-input>
      <el-button type="primary" icon="el-icon-search" class="selectsearch" size="small" :disabled="disabled" @click="selectsearch"></el-button>
    </div>
    <zhlDialog :title="title" ref="selectUserdialog" width="960px" class="my-dialog">
      <div class="filter-search">
        <div class="filter-flex">
          <div class="filter-search-border">
            <div style="margin-right:10px;cursor: pointer;    display: inline-block;
    position: relative;
    top: -5px;" v-if="isselectModel===true">
              <a-dropdown>
                <a class="ant-dropdown-link" @click="e => e.preventDefault()">
                  {{title}}
                  <a-icon type="down" />
                </a>
                <a-menu slot="overlay" @click="typemodechange">
                  <a-menu-item v-for="item in options" :key="item.value">
                    {{item.name}}
                  </a-menu-item>

                </a-menu>
              </a-dropdown>
            </div>
            <span style="margin-right:10px;cursor: pointer;" title="返回上级" @click="returnfun()">
              <nx-svg-icon class-name="return-icon" icon-class="return" slot="avatar" style=" width: 25px;height:25px;    color: dimgray;" />
            </span>
            <a-input-search placeholder="请输入搜索词" enter-button="搜索" size="large" v-model="searchwordkey" @search="onSearch" @keydown="onSearch" @keyup="onKeyup" class="inputsearch" :style="isselectModel===true?'  width: calc(100% - 130px);':''">
              <a-icon slot="prefix" type="user" /> >
            </a-input-search>
          </div>
        </div>
      </div>
      <el-row class="filtermain">
        <a-list item-layout="horizontal" :data-source="data">
          <div style="display:none">{{ data }}</div>
          <a-empty v-if="data.length === 0" />
          <a-list-item slot="renderItem" slot-scope="item" @click="selected(item)">
            <template v-if="item.isDept < 3 - typemode">
              <a-list-item-meta :description="item.description">
                <a slot="title"> {{ item.Name }}</a>
                <nx-svg-icon :class-name="item.iconName + '-icon'" :icon-class="item.iconName" slot="avatar" style=" width: 40px;height: 40px;color: rgb(16, 142, 233);" />
              </a-list-item-meta>
              <a slot="actions">
                <nx-svg-icon class-name="jinru-icon" icon-class="jinru" slot="avatar" style=" width: 25px;height: 25px;color: rgb(16, 142, 233);" />
              </a>
            </template>
            <template v-else>
              <a-list-item-meta :description="item.description">
                <a slot="title">{{ item.Name }}</a>
                <nx-svg-icon :class-name="item.iconName + '-icon'" :icon-class="item.iconName" slot="avatar" style=" width: 40px;height: 40px;    color: rgb(16, 142, 233);" />
              </a-list-item-meta>
              <a slot="actions">
                <nx-svg-icon class-name="gou-icon" icon-class="gou" slot="avatar" v-if="item.checked" style=" width: 16px;height: 16px;    color: rgb(16, 142, 233);" />
              </a>
            </template>
          </a-list-item>
        </a-list>
      </el-row>
      <el-row class="filterbottom">
        <div class="selectlist">
          <span v-for="item in selectlist" v-bind:key="item.no">
            <a-tag color="#108ee9" closable @close="removeCheacked(item)">
              {{ item.Name }}
            </a-tag>
          </span>
        </div>
        <div class="operation">
          <el-button @click="close()">关闭</el-button>
          <el-button type="primary" @click="confirm()">确定</el-button>
        </div>
      </el-row>
    </zhlDialog>
  </div>
</template>
<script>
import { SelectUser, SearchUser } from '@/api/tappUser'
import { SearchOrgan, SelectOrgan } from '@/api/tappOrgan'
import { SelectDept, SearchDept } from '@/api/tappDept'
import { SelectRole, SearchRole } from '@/api/tappRole'
import nxSvgIcon from '@/components/nx-svg-icon/index'
export default {
  name: 'selector',
  components: { nxSvgIcon },
  props: ['typemode', 'checklisted', 'ismulti', 'disabled', 'ishide', 'isselectModel'],
  data () {
    return {
      data: [],
      searchwordkey: '',
      selectlist: [],
      oldsearchwordkey: '',
      historyqueryworkkey: [],
      title: '',
      selectusernames: '',
      options: [{ value: '1', name: '人员选择' }, { value: '2', name: '部门选择' }, { value: '3', name: '机构选择' }, { value: '4', name: '角色选择' }]
    }
  },
  created () {
    switch (String(this.typemode)) {
      case '1':
        this.title = '人员选择'
        break
      case '2':
        this.title = '部门选择'
        break
      case '3':
        this.title = '机构选择'
        break
      case '4':
        this.title = '角色选择'
        break
      default:
        this.title = '成本中心选择'
        break
    }
    if (typeof (this.checklisted) === 'object' && this.checklisted.value !== undefined && this.checklisted.value instanceof Array) {
      this.selectlist = []
      this.checklisted.value.forEach(ee => {
        if (this.selectlist.indexOf(ee) < 0) {
          this.selectlist.push(ee)
        }
      })
      this.selectusernames = this.checklisted.text
    }
  },
  methods: {
    onSearch () {
      if (this.oldsearchwordkey === this.searchwordkey) {
        return
      }
      this.oldsearchwordkey = this.searchwordkey
      if (this.searchwordkey === '' || this.searchwordkey === undefined) {
        this.loadData(
          this.historyqueryworkkey[this.historyqueryworkkey.length - 1]
        )
      } else {
        switch (this.typemode) {
          case 1:
            SearchUser(this.searchwordkey).then(res => {
              this.data = res.data
              this.data.forEach(element => {
                this.getdescription(element)
                element.checked = false
                const findlist = this.selectlist.filter(item => {
                  return item.no === element.no
                })
                if (findlist.length > 0) {
                  element.checked = true
                }
              })
            })
            break
          case 2:
            SearchDept(this.searchwordkey).then(res => {
              this.data = res.data
              this.data.forEach(element => {
                this.getdescription(element)
                element.checked = false
                const findlist = this.selectlist.filter(item => {
                  return item.no === element.no
                })
                if (findlist.length > 0) {
                  element.checked = true
                }
              })
            })
            break
          case 3:
            SearchOrgan(this.searchwordkey).then(res => {
              this.data = res.data
              this.data.forEach(element => {
                this.getdescription(element)
                element.checked = false
                const findlist = this.selectlist.filter(item => {
                  return item.no === element.no
                })
                if (findlist.length > 0) {
                  element.checked = true
                }
              })
            })
            break
          case 4:
            SearchRole(this.searchwordkey).then(res => {
              this.data = res.data
              this.data.forEach(element => {
                this.getdescription(element)
                element.checked = false
                const findlist = this.selectlist.filter(item => {
                  return item.no === element.no
                })
                if (findlist.length > 0) {
                  element.checked = true
                }
              })
            })
            break
          default:
            this.data = []
            break
        }
      }
    },
    loadData (wordkey) {
      if (wordkey === '' || wordkey === undefined || wordkey === '10001') {
        this.historyqueryworkkey = []
        wordkey = '10001'
        this.historyqueryworkkey.push(wordkey)
      } else if (this.historyqueryworkkey.indexOf(wordkey) < 0) {
        this.historyqueryworkkey.push(wordkey)
      }
      // console.log(this.typemode === '1')
      switch (this.typemode) {
        case 1:
          SelectUser(wordkey).then(res => {
            this.data = res.data
            this.data.forEach(element => {
              this.getdescription(element)
              element.checked = false
              const findlist = this.selectlist.filter(item => {
                return item.no === element.no
              })
              if (findlist.length > 0) {
                element.checked = true
              }
            })
            // this.data.
          })
          break
        case 2:
          SelectDept(wordkey).then(res => {
            this.data = res.data
            this.data.forEach(element => {
              this.getdescription(element)
              element.checked = false
              const findlist = this.selectlist.filter(item => {
                return item.no === element.no
              })
              if (findlist.length > 0) {
                element.checked = true
              }
            })
          })
          break
        case 3:
          SelectOrgan(wordkey).then(res => {
            this.data = res.data
            this.data.forEach(element => {
              this.getdescription(element)
              element.checked = false
              const findlist = this.selectlist.filter(item => {
                return item.no === element.no
              })
              if (findlist.length > 0) {
                element.checked = true
              }
            })
          })
          break
        case 4:
          if (wordkey === '10001') {
            wordkey = ''
          }
          SelectRole(wordkey).then(res => {
            this.data = res.data
            this.data.forEach(element => {
              this.getdescription(element)
              element.checked = false
              const findlist = this.selectlist.filter(item => {
                return item.no === element.no
              })
              if (findlist.length > 0) {
                element.checked = true
              }
            })
          })
          break
        default:
          this.data = []
          break
      }
    },
    selected (item) {
      if (!(item.isDept < 3 - this.typemode)) {
        if (this.ismulti === false) {
          if (this.selectlist.length === 0) {
            item.checked = true
            this.selectlist.push(item)
          } else {
            this.data.forEach(ee => {
              ee.checked = false
            })
            item.checked = true
            this.selectlist.splice(0, 1)
            this.selectlist.push(item)
          }
        } else {
          const findlist = this.selectlist.filter(element => {
            return item.no === element.no
          })
          if (findlist.length === 0) {
            this.selectlist.push(item)
            item.checked = true
          } else {
            this.selectlist.splice(this.selectlist.indexOf(item), 1)
            item.checked = false
          }
        }
      } else {
        this.loadData(item.no)
      }
    },
    removeCheacked (item) {
      item.checked = false
      this.selectlist.splice(this.selectlist.indexOf(item), 1)
    },
    onKeyup (e) {
      if (e.code === 'Backspace' || e.code === 'Space' || e.code === 'Enter') {
        this.onSearch()
      }
    },
    getdescription (element) {
      if (element.isDept === 2) {
        element.description =
          '用户名：' +
          element.no +
          '        所属机构：' +
          element.grandName +
          '        所属部门：' +
          element.deptPName +
          '        类型：人员'
        element.iconName = 'user'
      } else if (element.isDept === 1) {
        element.description =
          '上级机构：' +
          element.deptPName +
          (element.grandName !== null
            ? '        上级部门：' + element.grandName
            : '') +
          '        类型：部门'
        element.iconName = 'peoples'
      }
      if (element.isDept === 0) {
        element.description =
          '上级机构：' + element.deptPName + '        类型：机构'
        element.iconName = 'tree'
      }
    },
    returnfun () {
      if (
        this.searchwordkey !== undefined &&
        this.searchwordkey !== '' &&
        this.searchwordkey !== null
      ) {
        this.loadData(
          this.historyqueryworkkey[this.historyqueryworkkey.length - 1]
        )
        this.searchwordkey = undefined
      } else if (this.historyqueryworkkey.length > 1) {
        this.loadData(
          this.historyqueryworkkey[this.historyqueryworkkey.length - 2]
        )
        this.historyqueryworkkey.splice(this.historyqueryworkkey.length, 1)
      }
    },
    confirm () {
      const usernames = []
      this.checklisted = {}
      this.checklisted.text = ''
      this.checklisted.value = []
      this.selectlist.forEach(ee => {
        usernames.push(ee.Name)
        this.checklisted.value.push(ee.no)
      })
      this.checklisted.text = usernames.join(';')
      // this.checklisted = this.selectlist
      this.selectusernames = usernames.join(';')
      this.$emit('update:checklisted', this.checklisted)
      this.$emit('confirm', this.checklisted, this.typemode)
      this.$refs.selectUserdialog.visible = false
    },
    close () {
      this.$emit('close')
      this.$refs.selectUserdialog.visible = false
    },
    selectsearch () {
      this.$refs.selectUserdialog.visible = true
      this.loadData()
    },
    typemodechange (item) {
      this.selectlist = []
      this.typemode = item.key
      switch (String(this.typemode)) {
        case '1':
          this.title = '人员选择'
          break
        case '2':
          this.title = '部门选择'
          break
        case '3':
          this.title = '机构选择'
          break
        case '4':
          this.title = '角色选择'
          break
        default:
          this.title = '成本中心选择'
          break
      }
      this.loadData()
    }
  },
  mounted () { },
  watch: {
    checklisted (val) {
      if (val !== undefined && val.value !== undefined) {
        val.value.forEach(ee => {
          if (this.selectlist.indexOf(ee) < 0) {
            this.selectlist.push(ee)
          }
        })
        this.selectusernames = val.text
      } else {
        this.selectusernames = ''
        this.selectlist.length = 0
      }
    }
  }
}
</script>
<style>
.ant-input-lg {
  font-size: 14px;
}
.ant-btn-lg {
  font-size: 14px;
}
.ant-tag {
  padding: 5px 10px;
}
.input-with-select .el-input__inner {
  border-right: 0px !important;
  border-bottom-right-radius: 0px;
  border-top-right-radius: 0px;
}
.selectsearch {
  border-bottom-left-radius: 0px !important;
  border-top-left-radius: 0px !important;
}
</style>
<style rel="stylesheet/scss" lang="scss" scoped>
.filter-flex {
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -ms-box-flex: 1;
  -o-box-flex: 1;
  box-flex: 1;
}
.inputsearch {
  width: calc(100% - 40px);
}
.ant-empty {
  margin-top: 30px;
  margin-bottom: 30px;
}
.filter-search {
  position: relative;
  width: 100%;
  height: 50px;
  line-height: 50px;
  padding: 5px 10px;
  background: #eee;
  top: -3px;
  display: block;
}
.filtermain {
  margin-left: 15px;
  margin-right: 10px;
  min-height: 400px;
  height: calc(100vh - 180px);
  overflow-y: auto;
  overflow-x: hidden;
}
.filterbottom {
  margin-top: 8px;
  margin-left: 15px;
  margin-right: 10px;
}
.filterbottom button {
  float: right;
  margin-right: 10px;
  margin-bottom: 20px;
}
.selectlist {
  width: calc(100% - 200px);
  float: left;
}
.operation {
  width: 200px;
  float: right;
}
.input-with-select {
  width: calc(100% - 57px);
}
</style>
